<!DOCTYPE HTML>

<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/default.css" />
        <script src="./js/dracula/jquery-1.4.2.min.js"></script>
        <!--  The Raphael JavaScript library for vector graphics display  -->
        <script src="./js/kineticJS/kinetic-v4.0.3.min.js"></script>
        <!--  The Raphael JavaScript library for vector graphics display  -->
        <script src="./js/dracula/raphael-min.js"></script>
        <!--  Dracula  -->
        <!--  An extension of Raphael for connecting shapes -->
        <script src="./js/dracula/dracula_graffle.js"></script>
        <!--  Graphs  -->
        <script src="./js/dracula/dracula_graph.js"></script>
        <script src="./js/dracula/dracula_algorithms.js"></script>

        <script src="./js/unit.js"></script>
        <script src="./js/scenarios.js"></script>
        <script src="./js/terrains.js"></script>
        <script src="./js/terrainDatabase.js"></script>
        <!--<script src="./js/boardGraph.js"></script>-->
        <script src="./js/terrain.js"></script>
        <script src="./js/boardSetup.js"></script>
        <script src="./js/imageLoader.js"></script>
        <script src="./js/player.js"></script>
        <script src="./js/game.js"></script>
        <script src="./js/utils.js"></script>
        <script>
            window.onload = function() {
                var scenario = Hasl.Scenarios.Test;
                mGameInterface.startScenario(scenario, true);
                $("#graph").hide();
            };
        
            function renderGraph()
            {
                $("#graph").show();
                $("#showGraph").hide();
            
                var width = $(document).width();
                var height = $(document).height() - 100;
                var graph = boardGraph.getGraph();
    
                /* layout the graph using the Spring layout implementation */
                var layouter = new Graph.Layout.Spring(graph);
    
                /* calculating the shortest paths via Dijkstra */
                dijkstra(graph, graph.nodes["A1"]);
    
                /* colourising the shortest paths and setting labels */
                for(e in graph.edges) {
                    if(graph.edges[e].target.predecessor === graph.edges[e].source || graph.edges[e].source.predecessor === graph.edges[e].target) {
                        graph.edges[e].style.stroke = "#bfa";
                        graph.edges[e].style.fill = "#56f";
                    } else {
                        graph.edges[e].style.stroke = "#aaa";
                    }
                }
    
                var renderer = new Graph.Renderer.Raphael('canvas', graph, width, height);

                redraw = function() {
                    layouter.layout();
                    renderer.draw();
                };
            };

        </script>
    </head>
    <body>
        <div id="container"></div>

        <!--    TODO: fix this! 
                <div id="debugGraph">
                    <button id="showGraph" onclick="renderGraph();">Show graph</button><br>
                    <div id="graph">
                        Graph look'n ugly? Hit <button id="redraw" onclick="redraw();">redraw</button>!<br>
                        <div id="canvas"></div>
                    </div>
                </div>-->
    </body>
</html>